<template>
  <view class="list">
    <view
      class="fixbg"
      :style="{'background-image' : 'url('+ newlist.coverImgUrl + ')'}"
    >
    </view>
    <muscihead
      title="歌单"
      :icon="true"
    ></muscihead>
    <view v-show="!isloading">
      <scroll-view
        scroll-y="true"
        class="container"
      >
      <!-- 头部介绍 -->
        <view class="top">
          <view class="img">
            <img
              :src="newlist.coverImgUrl"
              alt=""
            >
            <text class="iconfont icon-bofang1">
              {{newlist.playCount | fotmatCount}}
            </text>
          </view>
          <view class="right">
            <view class="right1">{{newlist.name}}</view>
            <view class="right2">
              <img
                :src="newlist.creator.backgroundUrl"
                alt=""
              >
              <text>{{newlist.creator.nickname}}</text>
            </view>
            <view class="right3">{{newlist.description}}</view>
          </view>
        </view>
        <!-- 分享按钮 -->
        <button
          class="share"
          open-type="share"
        >
          <text class="iconfont icon-fenxiang_2"></text>
          点击分享好友
        </button>

        <!-- 歌曲 -->
        <view class="list-music">
          <view class="music-head">
            <text class="iconfont icon-bofang"></text>
            <text class="all">播放全部</text>
            <text class="oneone">(共{{newlist.trackCount}}首歌)</text>
          </view>

          <view class="music" v-for="(items,index) in newlist.tracks" :key="index" @click="gotodetail(items.id)">
            <view class="number">
              {{index+1}}
            </view>
            <view class="center">
              <view class="name">{{items.name}}</view>
              <view class="images">
                <img 
                v-if="bbb[index].flag>60 && bbb[index].flag<70"
                  src="../../static/images/sq.png"
                  alt=""
                >
                <img
                v-if="bbb[index].maxbr === 999000"
                  src="../../static/images/dujia.png"
                  alt=""
                >
                {{items.ar[0].name}}-{{items.name}}
              </view>

            </view>
            <text class="iconfont icon-bofang1"></text>
          </view>

        </view>
      </scroll-view>
    </view>
  </view>

</template>

<script>
import "@/common/iconfont.css";
import muscihead from "../../components/musichead/musichead";
import { baseUrl } from "../../common/config";
export default {
  components: {
    muscihead,
  },
  props: {},
  data: () => ({
    id: null,
    newlist: {
      coverImgUrl:''
    },
    bbb:[],
    isloading:true,
  }),
  computed: {},
  methods: {
    getList() {
      uni.request({
        url: `${baseUrl}/playlist/detail?id=${this.id}`, //仅为示例，并非真实接口地址。
        success: (res) => {
          console.log(res.data);
          this.newlist = res.data.playlist;
          this.bbb=res.data.privileges
          console.log(this.newlist);
          this.isloading=false
          uni.hideLoading();
        },
      });
    },
    gotodetail(id){
        uni.navigateTo({
            url: `/pages/detail/detail?id=${id}`
        });
    }
  },
  watch: {},
  onLoad(option) {
    uni.showLoading({
      title: '加载中'
    });
    console.log(option);
    this.id = option.id;
    this.getList();
  },
};
</script>

<style lang="scss" scoped>
.share {
  width: 330rpx;
  height: 74rpx;
  margin-left: 20%;
  margin-right: 20%;
  border-radius: 50rpx;
  margin: 0 auto;
  color: white;
  background-color: rgba($color: #000000, $alpha: 0.4);
  text-align: center;
  line-height: 74rpx;
  font-size: 28rpx;
  text {
    margin-right: 15rpx;
  }
}
.top {
  display: flex;
  margin: 30rpx 30rpx 30rpx 30rpx;
  .img {
    width: 265rpx;
    height: 265rpx;
    border-radius: 30rpx;
    overflow: hidden;
    position: relative;
    margin-right: 45rpx;
    img {
      width: 100%;
      height: 100%;
    }
    text {
      position: absolute;
      top: 0;
      right: 0;
      color: white;
    }
  }
  .right {
    flex: 1;
    color: white;
    .right1 {
      font-size: 35rpx;
      margin-bottom: 15rpx;
    }
    .right2 {
      color: #b8ceec;
      display: flex;
      font-size: 26rpx;
      margin: 20rpx 0;
      align-items: center;
      //  margin-right: 15rpx;
      img {
        width: 55rpx;
        height: 55rpx;
        border-radius: 50%;
        margin-right: 15rpx;
      }
    }
    .right3 {
      font-size: 26rpx;
      color: #b8ceec;
      line-height: 40rpx;
    }
  }
}

.list-music {
  background-color: white;
  border-radius: 50rpx;
  margin-top: 40rpx;
  overflow: hidden;
  .music {
    display: flex;
    margin: 0 32rpx 60rpx 22rpx;
    align-items: center;

    .number {
      margin: 30rpx 30rpx;
      width: 58rpx;
      color: #959595;
    }
    .iconfont {
      font-size: 50rpx;
      color: #c7c7c7;
    }
    .center {
      flex: 1;
      .name {
        font-size: 35rpx;
        width: 70vw;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .images {
      align-items: center;
      font-size: 28rpx;
      color: #b3b3b3;
        width: 60vw;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

      img {
        width: 40rpx;
        height: 25rpx;
        margin-right: 10rpx;
      }
    }
  }
  .music-head {
    height: 50rpx;
    margin: 30rpx 0 70rpx 22rpx;
    .iconfont {
      height: 50rpx;
      font-size: 50rpx;
      margin-right: 26rpx;
    }
    .all {
      margin-right: 10rpx;
      font-size: 30rpx;
    }
    .oneone {
      font-size: 26rpx;
      color: #b3b3b3;
    }
  }
}
</style>
